<template>
  <div style="height:520px;overflow-x:hidden;overflow-y:auto;">

    <el-row v-for="(a, index) in artlist" :key="index" style="padding:3px;background-color: rgba(0, 0, 0, 0.1);border-bottom: 1px solid rgba(59, 72, 57, 0.3);
    box-sizing: border-box;">
      <el-col :span="4" style="height:40px;">
        <img :src="a.headimg" style="width:40px;height:40px;border-radius:50%;cursor:pointer;" @click="gotohomepage(a.id)">
      </el-col>
      <el-col :span="20"> 
        <p style="font-size: 10px;color:#000;">{{a.username}} <span style="float:right;">{{a.addtime | data}}</span></p> 
        <p style="font-size:14px;color:#000;margin-top: 5px;cursor:pointer;font-weight: bolder;" @click="open(a.articleurl)">{{a.articlename}}</p>   
      </el-col>
    </el-row>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
    	<span slot="no-more">
	      小伙子已经到底部啦！！
	    </span>
    </infinite-loading>
 
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: 'index',
  data () {
    return {
      artlist: [],
      filter: {
        currentpage: 1,
        pagesize: 10
      }
    }
  },
  methods: {
    gotohomepage: function (id) {
      this.H.openwin('/homepage/' + id, 'square', true)
    },
    onInfinite: function () {
      console.log(666)
      let that = this
      that.H.ajax('/home/index/getNewArticle', that.filter, 'get', function (response) {
        if (response.success) {
          console.log(response)
          if (response.data.length < that.filter.pagesize) {
            that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
          }
          that.filter.currentpage++
          that.artlist = that.artlist.concat(response.data)
          that.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        } else {
          that.H.error('网络错误！')
        }
      })
    },
    open: function (url) {
      this.H.electron.shell.openExternal(url)
    }
  },
  filters: {
    data: function (input) {
      let d = new Date(input * 1000)
      let month = d.getMonth() + 1
      let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
      let hour = d.getHours()
      let minutes = d.getMinutes()
      return month + '-' + day + ' ' + hour + ':' + minutes
    }
  },
  components: {
    InfiniteLoading
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
p{
	text-align:left;
	font-size:14px;
}
::-webkit-scrollbar{width:2px;}
::-webkit-scrollbar-track{background-color:rgba(0, 0, 0, 0.1);}
::-webkit-scrollbar-thumb{background-color:#00aff0;}
::-webkit-scrollbar-thumb:hover {background-color:#9c3}
::-webkit-scrollbar-thumb:active {background-color:#00aff0}
</style>
